<template>
  <button
    class="pt-button"
    :class="[
			type,
			{
				'right-angle': rightAngle,
				'block': block
			}
		]"
    @click="$emit('click')"
    type="button"
  >
    <span v-if="icon" class="pt-icon" :style="{fontSize: iconSize + 'px'}" :class="icon"></span>
    <span v-if="$slots.default">
      <slot></slot>
    </span>
  </button>
</template>

<script>
export default {
  name: "ptButton",
  props: {
    type: {
      type: String,
      default: ""
    },
    rightAngle: Boolean,
    block: Boolean,
    icon: String,
    iconSize: Number
  }
};
</script>

<style lang="less" scoped>
// 按钮
.pt-button {
  font-size: 18px;
  border: none;
  cursor: pointer;
  padding: 11px 42px;
  font-weight: 500;
  background-color: @bgColor1;
  color: @fColor2;
  border-radius: 6px;
  .pt-icon:not(:last-child) {
    margin-right: 4px;
  }
  &.primary {
    background-color: @primary;
    color: @fColor4;
  }
  &.success {
    background-color: #67c23a;
    color: #fff;
  }
  &.error {
    background-color: #f56c6c;
    color: #fff;
  }
  &.warning {
    background-color: #ff7800;
    color: #fff;
  }
  &.text {
    background: none;
    color: @fColor1;
    padding: 0;
    border-radius: 0;
  }
  &.text.primary {
    color: @primary;
  }
  &.right-angle {
    border-radius: 0;
  }
  &.block {
    display: block;
    width: 100%;
  }
}
</style>